<template>
    <div class="member">
        <div class="jieshao">
            <div class="jieshao_1">
                <img src="@/assets/my/heika.png" alt="">
                <p>
                    <span class="f24">58/年 优惠额度上限5000</span>
                    <span class="f24">38/半年 优惠额度上限2500</span>
                </p>
            </div>
        </div>
        <div class="banners" >
            <div class="banner_list">
                <dl v-for="(item, key) in equity" :key="key">
                    <dt>{{item.tit}}</dt>
                    <dd>{{item.cont}}</dd>
                </dl>
            </div>
        </div>
        <div class="icon_list">
            <li v-for="(item, key) in equity" :key="key" :class="key == 0 ? 'on' : ''">
                <i :class="item.icon"></i>
                <span class="f24">{{item.tit}}</span>
            </li>
        </div>
        <div class="btn">
            <button class="f30">我要开通</button>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'member',
        data() {
            return {
                equity: [
                    {
                        tit: '黑卡大师',
                        cont: '会员在生日期间会收到生日礼物和专属的生日祝福',
                        icon: 'icon iconfont icon-yonghu'
                    },
                    {
                        tit: '生日礼物',
                        cont: '会员在生日期间会收到生日礼物和专属的生日祝福',
                        icon: 'icon iconfont icon-lipin'
                    },
                    {
                        tit: '黑卡大师优惠',
                        cont: '会员在生日期间会收到生日礼物和专属的生日祝福',
                        icon: 'icon iconfont icon-huafeiquan'
                    },
                    {
                        tit: '售后无忧',
                        cont: '会员在生日期间会收到生日礼物和专属的生日祝福',
                        icon: 'icon iconfont icon-kefu1'
                    },
                    {
                        tit: '折上折',
                        cont: '会员在生日期间会收到生日礼物和专属的生日祝福',
                        icon: 'icon iconfont icon-youhui'
                    },
                ],
            }
        }
    }
</script>

<style lang="less" scoped>
    .member{
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        background: #e0dbd5;
        overflow: hidden;
        .jieshao{
            .padd(0, 20);
            .pt(20);
            .jieshao_1{
                width: 100%;
                background: #c6ab78;
                border-radius: 0 0 5px 5px;
                img{
                    width: 100%;
                    height: auto;
                }
                p{
                    display: flex;
                    span{
                        flex: 1;
                        text-align: center;
                        color: #fff;
                        .lh(60);
                    }
                }
            }
        }
        .banners{
            width: 100%;
            overflow: auto;
            &::-webkit-scrollbar {
                display: none;
            }
            .banner_list{
                .w(1750);
                .mt(40);
                .ml(10);
                dl{
                    .w(330);
                    .h(180);
                    .padd(0, 30);
                    .m(10);
                    .mt(20);
                    display: inline-block;
                    box-sizing: border-box;
                    background: #fff; 
                    background: linear-gradient(135deg, transparent 8px, #fff 0) top left, 
                                linear-gradient(-135deg, transparent 8px, #fff 0) top right, 
                                linear-gradient(-45deg, transparent 8px, #fff 0) bottom right, 
                                linear-gradient(45deg, transparent 8px, #fff 0) bottom left; 
                    background-size: 51% 51%; 
                    background-repeat: no-repeat;
                    dt{
                        .lh(70);
                        text-align: center;
                    }
                    dd{
                        .lh(40);
                    }
                }
            }
        }
        .icon_list{
            display: flex;
            .mt(20);
            li{
                flex: 1;
                list-style: none;
                i.icon{
                    display: block;
                    margin: 0 auto;
                    text-align: center;
                    font-size: 26px;
                    .w(86);
                    .h(86);
                    .lh(86);
                    text-align: center;
                    border: 1px solid #333;
                    border-radius: 50%;
                }
                span{
                    display: block;
                    text-align: center;
                    .lh(60);
                }
            }
            .on{
                i.icon{
                    border: 1px solid #c6ab78;
                    background: #c6ab78;
                    color: #fff;
                }
            }
        }
        .btn{
            width: 100%;
            .padd(0, 20);
            box-sizing: border-box;
            position: absolute;
            bottom: 20px;
            left: 0;
            button{
                width: 100%;
                .h(88);
                border: none;
                background: #c6ab78;
                color: #fff;
                border-radius: 5px;
            }
        }
    }
</style>
